<template>
  <div class="input-number-auto-step">
    <el-input-number
      v-model="innerValue"
      v-bind="$attrs"
      :precision="precision"
      :step="innerStep"
      :max="max"
      :min="min"
      @change="onChange"></el-input-number>
  </div>
</template>

<script>
export default {
  name: 'InputNumberAutoStep',
  components: {},
  props: {
    value: {
      type: Number,
    },
    max: {
      type: Number,
    },
    min: {
      type: Number,
    },
    step: {
      type: Number,
    },
    precision: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      innerValue: null,
    }
  },
  computed: {
    innerStep() {
      if (this.step) {
        return this.step
      } else if (this.innerValue === 0) {
        return 1
      } else if (this.innerValue - this.min < 1) {
        return 0.1
      } else if (this.max - this.innerValue >= 1 || this.max === this.innerValue) {
        return 1
      }
      return 0.1
    },
  },
  watch: {
    value(val) {
      this.innerValue = val
    },
  },
  created() {
    if (this.value !== null) {
      this.innerValue = this.value
    }
  },
  mounted() {},
  methods: {
    onChange() {
      this.$emit('input', this.innerValue)
      this.$emit('change', this.innerValue)
    },
  },
}
</script>
<style lang="scss" scoped>
.input-number-auto-step {
  display: inline-block;
}
</style>
